<template>
    <div>
        <web-header />
        <div class="user-box">
            <!--左侧.begin-->
            <div class="order_left">

                <div class="my_order ">
                    <router-link class="order_left-item" to="">个人中心</router-link>
                </div>

                <div class="my_order ">
                    <router-link class="order_left-item" to="">我的订单</router-link>
                </div>

                <div class="my_order ">
                    <router-link class="order_left-item" to="">我的收藏</router-link>
                </div>

                <div class="my_order " style="background-color: #fff;">
                    <router-link class="order_left-item" to="" style=" color: #007aff;">我的信息</router-link>
                </div>

               
            </div>

            <!--右侧.begin-->
            <div class="order_right">
                <div class="order_right-user df">
                    <img src="https://pic5.40017.cn/i/ori/1difaMet93G_90x90_00.jpg" alt="" class="user-img">
                    <div class="temp1">
                        <div>尊敬的会员</div>
                        <div>普通会员></div>
                    </div>
                </div>
             
                <div style="margin-top: 40px;">
                    <div>
                        <div class="name">昵称</div>
                    </div>
                    <div>
                        <div class="name">真实姓名</div>
                    </div>
                    <div>
                        <div class="name">手机号码</div>
                    </div>
                    <div>
                        <div class="name">电子邮箱</div>
                    </div>
                    <div>
                        <div class="name">性别</div>
                    </div>
                    <div>
                        <div class="name">职业</div>
                    </div>
                    <div>
                        <div class="name">出生日期</div>
                    </div>
                    <div>
                        <div class="name">QQ号码</div>
                    </div>
                </div>
            </div>


        </div>

        <web-footer />
    </div>
</template>

<script setup>
import webHeader from "@/components/general/Header.vue";
import webFooter from "@/components/general/Footer.vue";
import { ref, onMounted, computed } from "vue";

</script>

<style lang="scss" scoped>
.user-box {
    display: flex;
    width: 1200px;
    min-width: 1200px;
    margin: auto;
    background-color: #fff;
    height: 800px;
    padding-top: 20px;
}

.order_left {
    width: 150px;
    height: 400px;
    background-color: #f7fbff;

    .order_left-item {
        display: block;
        width: 130px;
        height: 42px;
        line-height: 42px;
        font-size: 14px;
        font-weight: 700;
        padding-left: 20px;
        cursor: pointer;
    }

    .order_left-item:hover {
        color: #2477e3;
        background-color: #fff;
    }
}

.df {
    display: flex;
}

.order_right {
    width: 1000px;
    padding-left: 50px;
}

.order_right-user {
    display: flex;
    align-items: center;
}

.user-img {
    width: 80px;
    height: 80px;
    display: inline-block;
    border-radius: 50%;
}

.temp1 {
    margin: 0 40px;
}

.temp {
    margin-right: 100px;
}
</style>